<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
    <script>
      /**
       * Arco Design 的级联选择器
       * 属性：
       *  checkedStrategy = parent 的模拟算法
       * **/
      const config = [
        {
          label: "执行失败",
          value: "执行失败",
          children: [
            {
              label: "bug",
              value: "bug",
              children: [
                {
                  label: "P0 bug",
                  value: "P0 bug",
                },
                {
                  label: "P1 bug",
                  value: "P1 bug",
                },
                {
                  label: "P2 bug",
                  value: "P2 bug",
                },
                {
                  label: "P3 bug",
                  value: "P3 bug",
                },
                {
                  label: "疑似bug",
                  value: "疑似bug",
                },
                {
                  label: "重复问题",
                  value: "重复问题",
                },
              ],
            },
            {
              label: "业务变动",
              value: "业务变动",
              children: [
                {
                  label: "功能变更",
                  value: "功能变更",
                },
                {
                  label: "实验变更",
                  value: "实验变更",
                },
                {
                  label: "账号失效",
                  value: "账号失效",
                },
                {
                  label: "其他问题",
                  value: "其他问题",
                },
              ],
            },
            {
              label: "步骤编写问题",
              value: "步骤编写问题",
            },
            {
              label: "平台问题",
              value: "平台问题",
              children: [
                {
                  label: "操作对象错误",
                  value: "操作对象错误",
                },
                {
                  label: "平台执行错误/异常",
                  value: "平台执行错误/异常",
                },
              ],
            },
            {
              label: "设备/网络/环境问题",
              value: "设备/网络/环境问题",
            },
            {
              label: "其他",
              value: "其他",
            },
            {
              label: "测试",
              value: "测试",
              children: [
                {
                  label: "测试1",
                  value: "测试1",
                  children: [
                    {
                      label: "测试1-1",
                      value: "测试1-1",
                      children: [
                        {
                          label: "测试1-1-1",
                          value: "测试1-1-1",
                        },
                      ],
                    },
                  ],
                },
              ],
            },
          ],
        },
      ];

      // 选中值
      const selectedKeys = [
        // ['执行失败', 'bug', 'P0 bug'],
        ["执行失败", "bug", "P1 bug"],
        ["执行失败", "bug", "P2 bug"],
        ["执行失败", "bug", "P3 bug"],
        ["执行失败", "bug", "疑似bug"],
        ["执行失败", "bug", "重复问题"],
        ["执行失败", "业务变动", "功能变更"],
        ["执行失败", "业务变动", "实验变更"],
        ["执行失败", "业务变动", "账号失效"],
        ["执行失败", "业务变动", "其他问题"],
        ["执行失败", "步骤编写问题"],
        ["执行失败", "平台问题", "操作对象错误"],
        ["执行失败", "平台问题", "平台执行错误/异常"],
        ["执行失败", "设备/网络/环境问题"],
        ["执行失败", "其他"],
        ["执行失败", "测试", "测试1", "测试1-1", "测试1-1-1"],
      ];

      const findItem = (data, value) => {
        const find = data.find((item) => item.value === value);
        if (find) {
          return find;
        }
        for (const item of data) {
          if (item.children) {
            const find = findItem(item.children, value);
            if (find) {
              return find;
            }
          }
        }
      };

      function transformConfig(config, selectedKeys) {
        const selectedKeySet = new Set(
          selectedKeys.map((keys) => keys.join("/"))
        );

        function recurse(config, path = "") {
          return config
            .map((node) => {
              const currentPath = path ? `${path}/${node.value}` : node.value;
              if (node.children) {
                const children = recurse(node.children, currentPath);
                if (!children.length) return null;
                return {
                  ...node,
                  children,
                };
              } else if (selectedKeySet.has(currentPath)) {
                return node;
              }
              return null;
            })
            .filter((o) => o !== null);
        }

        return recurse(config);
      }

      function enuqly(data) {
        return data.map((item) => {
          if (item.children) {
            const origin = findItem(config, item.value);
            const equal = _.isEqual(item.children, origin?.children);
            if (equal) {
              return {
                label: item.label,
                value: item.value,
              };
            }
            return {
              ...item,
              children: enuqly(item.children),
            };
          }
          return item;
        });
      }

      const transformedConfig = transformConfig(config, selectedKeys);

      console.log(JSON.stringify(transformedConfig, null, 2));
      console.log(enuqly(transformedConfig));
    </script>
  </body>
</html>
